<template>
  <div class="box">
    <van-empty description="买东西去" v-if="!list.length" />
    <van-nav-bar title="购物车" left-arrow @click-left="onClickLeft" />
    <div v-for="item in list" :key="item.id">
      <van-card :price="item.price" :title="item.title">
        <template #thumb>
          <div class="shop">
            <van-checkbox v-model="item.checked"></van-checkbox>
            <van-image width="80" height="80" lazy-load :src="item.img" />
          </div>
        </template>
        <template #num>
          <van-stepper v-model="item.num" />
        </template>
      </van-card>
    </div>
    <van-submit-bar :price="3050" button-text="提交订单" @submit="onSubmit">
      <van-checkbox v-model="allchecked">全选</van-checkbox>
    </van-submit-bar>
  </div>
</template>
<script setup>
import { computed, ref } from "vue";
const list = ref([]);
import axios from "axios";
axios.get("/getshop").then((resp) => {
  console.log(456, resp);
  list.value = resp.data.list;
});

const allchecked = computed({
  get() {
    return list.value.every((item) => item.checked);
  },
  set(val) {
    list.value.forEach((item) => (item.checked = val));
  },
});
</script>
<style lang='scss' scoped>
.box {
  margin-bottom: 50px;
  .shop {
    display: flex;
  }
}
</style>